<template>
  <div class="dynamic-item-wrapper" ref="itemWrapper" @click.stop="clickItem">
    <div class="top">
      <div class="headImg" v-lazy:background-image="user.headUrl" @click.stop="toMyDynamic(user.id)"></div>
      <div :style="{width: topContentWidth + 'px'}">
        <div style="display: flex; justify-content: space-between;padding-left: 9px;">
          <b style="color: #333;">{{user.nickname}}</b>
          <transition name="bounce" enter-active-class="" leave-active-class="bounceOut">
            <div class="litter-button" v-if="user.id !== myId && other.followStatus != 1 && other.friend != true" @click.stop="changeFollowStatus(user.id)">
              <i class="fa fa-plus" aria-hidden="true" style="margin-right: 2px;"></i>好友
            </div>
          </transition>
        </div>
        <p class="txt">
          <span v-if="dynamic.publishAddress" class="address">
            <i class="fa fa-map-marker" aria-hidden="true" style="margin-right: 3px;"></i>{{dynamic.publishAddress}}</span>
          <span :style="{minWidth: '88px', textAlign: dynamic.publishAddress?'right':'left'}">{{dynamic.publishTime | personifyTime}}</span>
        </p>
      </div>
    </div>

    <div class="main">
      <p class="text">
        <a href="javascript: void(0)" class="tag" v-for="(tag, index) in dynamic.tags" :key="index" @click.stop="toTag(dynamic.tagIds[index])">#{{tag}}#</a>
        {{dynamic.content}}
      </p>

      <div class="imgs" v-if="dynamic.atlas.length > 0">
        <!-- 剩一张图片的时候 -->
        <template v-if="dynamic.atlas.length < 9 && dynamic.atlas.length % 3 === 1">
          <div v-for="(img, index) in dynamic.atlas" :key="index" v-lazy:background-image="index === 0 ? img + '-meitu1' : img + '-meitu3'" :class="{img1: index === 0, img3: index !== 0}" class="imgItem" @click.stop.stop="clickImgItem(dynamic.atlas, index)">
          </div>
        </template>

        <!-- 剩两张图片的时候 -->
        <template v-if="dynamic.atlas.length < 9 && dynamic.atlas.length % 3 === 2">
          <div v-for="(img, index) in dynamic.atlas" :key="index" v-lazy:background-image="index === 0 || index === 1 ? img + '-meitu2' : img + '-meitu3'" :class="{img2: index === 0 || index === 1, img3: index !== 0 && index !== 1}" class="imgItem" @click.stop.stop="clickImgItem(dynamic.atlas, index)">
          </div>
        </template>

        <!-- 其他情况-->
        <template v-if="dynamic.atlas.length % 3 === 0 || dynamic.atlas.length >= 9">
          <div v-for="(img, index) in dynamic.atlas" :key="index" v-if="index < 9" v-lazy:background-image="img + '-meitu3'" class="imgItem img3" @click.stop.stop="clickImgItem(dynamic.atlas, index)">
            <div v-if="dynamic.atlas.length > 9 && index === 8" class="more-img">+{{dynamic.atlas.length - 9}}</div>
          </div>
        </template>
      </div>
    </div>

    <div v-if="product && product.id && product.id !== ''" class="product" @click.stop="toProductDetail(product.id, product.type)">
      <img v-lazy="product.thumblUrl" />
      <div>
        <p>{{product.name}}</p>
        <p class="address">{{product.address}}</p>
      </div>
    </div>

    <div class="number">
      <div class="item" :class="{active: other.starType != 0}" @click.stop="updateMessage(dynamic.id, 'star', other.starType)">
        <transition name="bounce" enter-active-class="bounceIn" leave-active-class="">
          <i v-if="other.starType != 0" class="icon iconfont icon-star-b" aria-hidden="true"></i>
        </transition>
        <i v-if="other.starType == 0" class="icon iconfont icon-star" aria-hidden="true"></i>
        {{other.starNum}}
      </div>
      <div class="item" @click.stop="clickItem(true)">
        <i class="fa fa-commenting-o" aria-hidden="true"></i>{{other.commentNum}}</div>
      <div class="item" @click.stop="toShare" style="border: none;">
        <i class="icon iconfont icon-share" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { localUser } from '@/assets/js/local'
import axios from '@/api/axiosApi'
// import { APP_DOWNLOAD_PATH } from '@/api/config'
import { mapGetters } from 'vuex'

export default {
  props: {
    myId: {
      type: String,
      default: ''
    },
    user: {
      type: Object,
      default: {
        id: '',
        openid: '',
        nickname: '',
        headUrl: ''
      }
    },
    dynamic: {
      type: Object,
      default: {
        id: '',
        content: '',
        atlas: [],
        publishAddress: '',
        publishTime: new Date(),
        tags: [],
        tagIds: []
      }
    },
    product: {
      type: Object,
      default: {
        id: '',
        thumblUrl: '',
        name: ''
      }
    },
    other: {
      type: Object,
      default: {
        collectionType: 0,
        starType: 0,
        followStatus: 0,
        collectionNum: 0,
        starNum: 0,
        shareNum: 0,
        commentNum: 0
      }
    }
  },
  data() {
    return {
    }
  },
  created() {
    // 这里不方便扩展，会考虑改动
    this.topContentWidth = window.innerWidth - 24 - 24 - 48
  },
  computed: {
    ...mapGetters([
      'meiTuTab'
    ])
  },
  methods: {
    clickImgItem(imgs, index) {
      this.$emit('clickImgItem', imgs, index)
    },
    clickItem(isComment) {
      const temp = {
        user: this.user,
        dynamic: this.dynamic,
        product: this.product,
        other: this.other
      }
      this.$store.commit('SET_DYNAMIC_DESC', temp)
      const query = isComment === true ? { isComment: 1 } : {}
      this.$router.push({
        path: `/meiTu/dynamicDesc/${this.dynamic.id}`,
        query: query
      })
    },
    updateMessage(dynamicId, type, value) {
      const userId = localUser.get('id')
      if (userId == null) {
        this.$vux.toast.text('请先登录！', 'middle')
        return
      }
      if (value) {
        // 禁止取消
        this.$vux.toast.text('你已经点赞过了~', 'middle')
        return
      }
      if (this.sendRequest) {
        return
      }
      let params = {
        userId: userId,
        targetId: dynamicId,
        type: 1
      }
      if (type === 'collection') {
        params.collectionType = value ? 0 : 1
      } else if (type === 'star') {
        params.starType = value ? 0 : 1
      } else if (type === 'share') {
        params.shareNum = value + 1
      }
      const _self = this
      this.sendRequest = true
      axios.post(this, '/v1/messageRecord', params, (data) => {
        _self.sendRequest = false
        if (type === 'collection') {
          if (value) {
            _self.other.collectionType = 0
            _self.other.collectionNum--
          } else {
            _self.other.collectionType = 1
            _self.other.collectionNum++
          }
        } else if (type === 'star') {
          if (value) {
            _self.other.starType = 0
            _self.other.starNum--
          } else {
            _self.other.starType = 1
            _self.other.starNum++
          }
        } else if (type === 'share') {
          _self.other.shareNum = value + 1
        }
      }, () => {
        _self.sendRequest = false
      }, false)
    },
    changeFollowStatus(targetUserId) {
      const userId = localUser.get('id')
      if (userId == null) {
        this.$vux.toast.text('请先登录！', 'middle')
        return
      }
      if (this.sendRequest) {
        return
      }
      if (userId === targetUserId) {
        this.$vux.toast.text('自己不能加自己！', 'middle')
        return
      }
      const valid = this.other.followStatus === 0 ? 1 : 0
      this.other.followStatus = valid
      this.sendRequest = true
      const _self = this
      axios.post(this, `/v1/follow/${userId}/${targetUserId}/${valid}`, null, (data) => {
        _self.sendRequest = false
        if (valid) {
          this.$vux.toast.text('加好友请求发送成功', 'middle')
          axios.post(this, '/v1/pushAlias', {
            userId: targetUserId,
            content: `${localUser.get('nickname')}请求加你为好友，赶快去看一看吧~`,
            linkUrl: `/user/newfriends`
          })
        }
      }, null, false)
    },
    toMyDynamic(userId) {
      this.$router.push(`/user/archives/${userId}`)
    },
    toProductDetail(productId, type) {
      if (type === 0) {
        this.$router.push('/hotel/' + productId)
      } else {
        this.$router.push('/scenic/' + productId)
      }
    },
    toTag(tagId) {
      this.$router.push(`/meiTu/tagDynamic/${tagId}`)
    },
    toShare() {
      const myNickname = localUser.get('nickname')
      this.$emit('toShare', {
        title: myNickname + '分享了 ' + this.user.nickname + ' 发的动态',
        desc: this.dynamic.content,
        thumbUrl: this.dynamic.atlas[0] + '-meitu3',
        // linkUrl: APP_DOWNLOAD_PATH
        linkUrl: this.$route.path
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.dynamic-item-wrapper
  padding 12px 12px 5px 12px
  border-radius 5px
  background #fff
  margin 12px 9px
  box-shadow 0 5px 5px $color-border
  .top
    display flex
    justify-content flex-start
    .headImg
      width 48px
      height 48px
      border-radius 50%
      background-repeat no-repeat
      background-size cover
      background-position 50% 50%
    .litter-button
      padding 0 11px
      width fit-content
      height 18px
      line-height 18px
      border 1px solid $color-theme
      border-radius 3px
      color $color-theme
      font-size 12px
      float right
      extend-click()
    .txt
      font-size 12px
      padding-left 9px
      color $color-text-2
      line-height 1.2rem
      display flex
      justify-content space-between
      .address
        no-wrap()
  .main
    padding 9px 0
    font-size $font-size-title
    .text
      no-wrap-n(4)
      font-size $font-size-desc
      line-height 1.3
      .tag
        color #2b68c5
        margin-right 5px
        &:hover, &:focus
          background $color-border
          border-radius 3px
    .imgs
      margin-top 9px
      display flex
      justify-content space-between
      flex-wrap wrap
      .img-line
        margin-top 7px
        display flex
        justify-content space-between
      .img1
        margin-top 7px
        background-size cover
        background-repeat no-repeat
        background-position 50% 50%
        width 100%
        height 160px
      .img2
        margin-top 7px
        background-size cover
        background-repeat no-repeat
        background-position 50% 50%
        width 48.5%
        height 120px
      .img3
        margin-top 7px
        background-size cover
        background-repeat no-repeat
        background-position 50% 50%
        width 32%
        height 80px
      .more-img
        color #fff
        height 100%
        width 100%
        background rgba(0, 0, 0, 0.5)
        font-size 21px
        text-align center
        line-height 80px
        font-weight bold
  .product
    display flex
    padding 3px
    background #e9e9e9
    font-size 14px
    img
      width 34px
      height 34px
    p
      line-height 1.4
      // font-weight: bold;
      font-size $font-size-desc
      padding-left 7px
      padding-right 5px
      no-wrap()
    .address
      font-size $font-size-small
      color $color-text-2
      font-weight normal
  .number
    margin-top 15px
    border-top 1px solid $color-border
    display flex
    justify-content space-between
    font-size $font-size-title
    color #999
    .item
      text-align center
      width 33.33%
      padding 11px 0 6px
      border-right 1px solid $color-border
      margin-right -1px
      color $color-text-2
      line-height 1
      i
        margin-right 4px
        font-size 15px
    .active
      color $color-theme
  .myPublish
    font-size $font-size-desc
    color $color-text-2
</style>
